{# /StudX_dir/StudX/schedule/templates/schedule/slot_form.html #}

{% extends 'dashboard_base.html' %}
{% load static i18n widget_tweaks %}

{% block content %}

<div class="container">
	<div class="card mb-3"> 
		<div class="card-body"> 
			<form method="post">
				{% csrf_token %}
				
				<div class="form-group row align-items-center">
					<div class="col-sm-2"><i class="fas fa-info-circle"></i></div>
					<div class="col-sm-10">
							{%  render_field form.status class="selectpicker" data-max-options="1" %}
					</div>
				</div> <!-- form-group row -->
				
				<div class="form-group row align-items-center">
					<div class="col-sm-2"><i class="fas fa-chalkboard-teacher"></i></div>
					<div class="col-sm-10">
						{% render_field form.teacher|attr:"multiple" class="selectpicker" %}
					</div>
				</div> <!-- form-group row -->
				
				<div class="form-group row align-items-center">
					<div class="col-sm-2"><i class="far fa-clipboard"></i></div>
					<div class="col-sm-10">
						{% render_field form.subject|attr:"multiple" class="selectpicker" data-live-search="true" data-max-options="1" %}
					</div>
				</div> <!-- form-group row -->
				
				<div class="form-group row align-items-center">
					<div class="col-sm-2">
						<i class="far fa-compass"></i>
					</div>
					<div class="col-sm">
						{% render_field form.location class="selectpicker" %}
					</div>
				</div>
				
				<div class="form-group row align-items-center">
					<div class="col-sm-2"><i class="far fa-clock"></i></div>
					
					<div class="col-sm">
						{% render_field form.weekDay class="selectpicker" %}
					</div>
				
					<div class="col-sm">
						{% render_field form.startAt class="form-control" type="time" %}
					</div>
					<div class="col-sm-auto">-</div>
					<div class="col-sm">
						{% render_field form.finishtAt class="form-control" type="time" %}
					</div>
					
				</div>  <!-- form-group row -->
				
				<div class="form-group row">
					<div class="col-sm-2"><i class="fas fa-users"></i></div>
					<div class="col-sm">
						{% for classe in classes %}
						<ul class="list-group" style="width:400px;">
							<li class="list-group-item d-flex justify-content-between align-items-center list-group-item-secondary">
								<input type="checkbox" name="MainCheckBox" id="{{ classe.classe_name }}" aria-label="CheckAll{{ classe.classe_name }}" onClick="toggle(this,'{{ classe.classe_name }}')">
								<a class="#" data-toggle="collapse" href="#collapse{{ classe.classe_name }}" role="button" aria-expanded="false" aria-controls="collapse{{ classe.classe_name }}">
									{{ classe.classe_name }}
								</a>
								<span id="P{{classe.classe_name}}" class="badge badge-secondary" ></span>
								

							</li>
							<div class="collapse" id="collapse{{ classe.classe_name }}">
								{% for student in classe.student_classe.all %}
								<li class="list-group-item d-flex justify-content-between align-items-center">
									<input type="checkbox" name="student" id="id_student_{{ forloop.counter0 }}" value="{{ student.uuid }}" aria-label="Checkbox{{ student.matricule }}" class="{{ classe.classe_name }}" {% if student.matricule in studentChecked %}checked{% endif %}>
									<div class="avatar">
										{% if student.picture %}
										<img class="img-avatar" src="/student{{ student.picture.url }}" alt="{{ student.fname }} {{ student.lname }}">
										{% else %}
										<img class="rounded-circle mx-auto d-block" height="100" width="100" src="/student/images/profile/default_user.jpeg" alt="default_img"/>
										{% endif %}
									</div>

									<span>{{ student.fname }} {{ student.lname }}</span>
									<span><a href="{% url 'student:view_student' student.uuid %}">{{ student.matricule }}</a></span>
								</li>

								{% endfor %}
							</div>
						</ul>
						{% endfor %}
					</div>
				</div> <!-- form-group row -->	 
				
				<div class="row">
					<div class="col">
						<button type="submit" class="btn btn-primary">{% trans 'Submit' %}</button>
						<a class="btn btn-secondary" href="{% url 'schedule:schedule_main' %}" role="button">{% trans 'Cancel' %}</a>
					</div>
				</div>
			</form>
		</div>
	</div>
</div> <!-- container -->

{% endblock content %}

{% block extra_preready_js %}
	function GetCheckedCount (id) {
		// Get the number of checkbox by classname
	}

	function ChangeMainCheckBoxStatus() {
	
			  var x = document.getElementsByName("MainCheckBox");
			  var i;
			  var CheckBoxArray;
			  var CheckBoxCount;
			  var CheckedBoxCount;

			  for (i = 0; i < x.length; i++) {

				CheckBoxArray = document.getElementsByClassName(String(x[i].id));
				CheckedBoxCount = 0;
				for (var ii = 0; ii < CheckBoxArray.length; ii++) {
				  if (CheckBoxArray[ii].type == "checkbox" && CheckBoxArray[ii].checked == true) {
					CheckedBoxCount++;
				  }
				}
				
				if (CheckedBoxCount > 0) {
					if (CheckBoxArray.length == CheckedBoxCount ) {
						// Full selection
						x[i].checked = true;
						document.getElementById("P".concat(String(x[i].id))).innerHTML = String(CheckedBoxCount).concat("/",String(CheckBoxArray.length));
						document.getElementById("P".concat(String(x[i].id))).className = "badge badge-info";
					}
					else {
						// Partial selection
						x[i].checked = false;
						document.getElementById("P".concat(String(x[i].id))).innerHTML = String(CheckedBoxCount).concat("/",String(CheckBoxArray.length));
						document.getElementById("P".concat(String(x[i].id))).className = "badge badge-info";
					}
				} else {
					// No selection
					  x[i].checked = false;
					  document.getElementById("P".concat(String(x[i].id))).innerHTML = String(CheckedBoxCount).concat("/",String(CheckBoxArray.length));
					  document.getElementById("P".concat(String(x[i].id))).className = "badge badge-secondary";
				}
			  }
			}

		$('input[name=student]').change(function() {
			ChangeMainCheckBoxStatus();
		}); 
{% endblock extra_preready_js %}

{% block extra_ready_js %}
			ChangeMainCheckBoxStatus();
{% endblock extra_ready_js %}

{% block extra_js %}
	<script>
		function toggle(source, checkboxes_name) {
				checkboxes = document.getElementsByClassName(checkboxes_name);
				for(var i=0, n=checkboxes.length;i<n;i++) {
					checkboxes[i].checked = source.checked;
				}
				if (source.checked == true) {
					document.getElementById("P".concat(String(checkboxes_name))).innerHTML = String(checkboxes.length).concat("/",String(checkboxes.length));
					document.getElementById("P".concat(String(checkboxes_name))).className = "badge badge-info";
				}
				else { 
					document.getElementById("P".concat(String(checkboxes_name))).innerHTML = "0".concat("/",String(checkboxes.length));
					document.getElementById("P".concat(String(checkboxes_name))).className = "badge badge-secondary";
				}
			}
	</script>
{% endblock extra_js %}

